import React, { PureComponent } from "react";
import style from "./index.module.scss";
import { Swiper, SpinLoading } from "antd-mobile";
import { getBannerListApi } from "@/api/other";
import store from "@/store";

class Banner extends PureComponent {
  state = {
    banners: [],
    isLoading1:store.getState().isLoading1
  };

  componentDidMount() {
    store.subscribe(()=>{
      this.setState({
        isLoading1:store.getState().isLoading1
      })
    })
    this.getBanners();
  }

  async getBanners() {
    let res = await getBannerListApi();
    if (res.data.code === 200) {
      this.setState(
        {
          banners: res.data.list,
        }
      );
    }
  }

  swiperRef = React.createRef();

  prePage = () => {
    // this.swiperRef.current.swipePrev();
    this.swiperRef.current.swipeTo(0);
  };

  render() {
    return (
      <div>
        <Swiper
          ref={this.swiperRef}
          className={style.swiper}
          autoplay
          loop
          autoplayInterval="1000"
        >
          {this.state.banners.map((item) => (
            <Swiper.Item key={item.pic}>
              {<img className={style.img} src={item.pic} alt={item.name} />}
            </Swiper.Item>
          ))}
        </Swiper>
        <div
          className={style.loading}
          style={{ display: this.state.isLoading1 ? "block" : "none" }}
        >
          <SpinLoading color="primary" />
        </div>
      </div>
    );
  }
}

export default Banner;
